<template>
	<view class="home-tabbar">
		<view class="home-tabbar-list" v-for="(s,k) in props.homeTabbarData" @click="skip(s)">
			<image :src="s.image" mode="aspectFill"></image>
			<text>{{s.text}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		homeTabbarData: Object
	})

	const skip = (item) => {
		if (item.text == '更多类型') {
			uni.navigateTo({
				url: '/subPackage/index/moreType'
			})
		} else {
			uni.navigateTo({
				url: `/subPackage/index/catePage?title=${item.text}`
			})
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.home-tabbar {
		@extend .flex;

		.home-tabbar-list {
			@extend .flex;
			width: calc(100% /5);
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16rpx;
			}

			text {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #020121;
				margin-top: 20rpx;
			}
		}
	}
</style>